昨天討論了前後端對資料格式在處理上的偏好，主要以最常見的 JSON 為範例，今天則想進一步整理 GET 與 POST 請求中可能使用的 Content-Type，並進一步討論 JSON 和 FormData 格式的適用情境與限制。

Content-Type 是一個 HTTP 標頭（header），用來告訴伺服器或瀏覽器在 HTTP 請求或回應中所傳遞的資料格式。它讓接收端知道如何解析和處理這些資料，以下會分別介紹 GET 與 POST 的 Content-Type：

GET

GET 請求主要用於從伺服器獲取資料，通常不包含正文（body），因此資料格式較為簡單（其實可以設置 body，但瀏覽器會忽略掉）。

1. 查詢字符串（Query String）：常用於過濾、搜尋或特定資源的查詢。資料被附加在 URL 後面，並以鍵值對（Key-Value Pair）的形式傳遞。
   • 格式：?key1=value1&key2=value2
   • 情境：從後端伺服器獲取符合特定條件的使用者資料。例如名字是 "Alice" 且年齡為 25 歲的用戶。
   • 範例：https://example.com/api/users?name=Alice&age=25
2. URL 路徑參數（Path Parameter）：把資料嵌入到 URL 中，通常用來指向特定的資源。
   • 格式： /resource/{id}
   • 情境：從後端伺服器獲取單一特定資源的詳細資訊。例如獲取 ID 為 12345 的使用者資料，伺服器將根據這個唯一的 ID 來返回對應的資料。
   • 範例：https://example.com/api/users/12345

POST

POST 通常用於向伺服器發送資料，例如提交表單或創建新資源。在 POST 請求中，資料通常包含在請求的 body 中，因此可以使用更靈活的資料格式，有著以下幾種形式：

1. JSON application/json
2. Form Data multipart/form-data
3. URL Encoded application/x-www-form-urlencoded
4. XML application/xml
5. Raw 文本或二進位資料 text/plain, application/octet-stream

接下來，我們主要介紹 JSON 和 FormData 這兩種格式～

JSON：最常見的資料格式

JSON（JavaScript Object Notation）是一種輕量級的資料交換格式（為什麼說他輕量可以閱讀參考資料第一篇），易於人類閱讀和書寫，也易於機器解析和生成。前後端之間的 API 溝通多以 JSON 作為主要格式，這是因為 JSON 具有以下幾個優點：

• 結構化清晰：JSON 支持物件和陣列，能夠清楚地表示複雜的資料結構。
• 普遍支援：幾乎所有的現代程式語言和框架都原生支援 JSON。

範例：

{
  "id": 1,
  "name": "Alice",
  "email": "alice@example.com"
}

注意事項：

• JSON 的 Key 和所有字串值都必須用雙引號括起來，儘管看起來很像 JavaScript 物件，但實際上是「字串」。
• JSON 不支援直接傳送檔案。如果需要上傳檔案，應考慮使用其他格式，如 FormData。

FormData：適合上傳檔案的資料格式

當前端需要上傳檔案（如圖片或影片）到伺服器時，FormData 是一個理想的選擇。

範例：

const formData = new FormData();
formData.append('username', 'Alice');
formData.append('profile_picture', fileInput.files[0]);

FormData 是一種 Key-Value 結構，專門用來表示多部分表單資料，說他是「多部分（multipart）」是因為有這以下特點：

• 檔案上傳：
  • 這種格式允許在表單提交時同時包含檔案。每個檔案和每個普通的表單字段都會被包裝成不同的「部分」（part）。
• 多部分內容：
  • 請求的正文會被分為多個部分，每個部分都有自己的標頭（headers）和內容。這些部分由一個分隔線（boundary）分開。每部分可以包含不同類型的資料，如文本或檔案。
• Content-Type 標頭：

  • 使用 multipart/form-data 作為 Content-Type 標頭來告訴伺服器，這個請求包含多個不同部分的資料。

  • 此時請求的內容會被組織成以下形式：

    --boundary
    Content-Disposition: form-data; name="username"
    
    Alice
    --boundary
    Content-Disposition: form-data; name="profile_picture"; filename="profile.jpg"
    Content-Type: image/jpeg
    
    (binary data of the image)
    --boundary--
    

FormData 的 Payload：

• 支援字串、檔案與 Blob（圖片、影片或任何二進位格式的資料）。
• 不支援物件與陣列，要注意不要誤用了。

參考資料

• JSON 的故事